<template>
  <zh-form :model="state.actorConfig" label-width="120px">
    <zh-form-select
        prop="orgId"
        label="所属组织"
        funcCode="org0030"
        :searchParams="state.campusParam"
        :fieldNames="{ label: 'orgName', value: 'orgId' }"
        :lazy="true"
        v-model="state.actorConfig.orgId"
    ></zh-form-select>
    <zh-form-select
        prop="processKey"
        label="流程业务名称"
        placeholder="单选"
        :options="props.dictData.PROCESSKEY"
        v-model="state.actorConfig.processKey"
    ></zh-form-select>
    <zh-form-select
        prop="nodeId"
        label="任务节点"
        placeholder="单选"
        :options="state.dictData.NODEID"
        v-model="state.actorConfig.nodeId"
    ></zh-form-select>
    <zh-form-select
        prop="configType"
        label="配置类型"
        placeholder="单选"
        :options="[{dictKey: '0',dictValue: '所有人'},{dictKey: '1',dictValue: '选择人员'}]"
        v-model="state.actorConfig.configType"
    ></zh-form-select>
    <zh-form-select
        v-if="state.actorConfig.nodeType == 1 && state.actorConfig.configType == '1'"
        prop="examineMode"
        label="审批方式"
        placeholder="单选"
        :options="[{dictKey: 1,dictValue: '顺签'},{dictKey: 2,dictValue: '会签'},{dictKey: 3,dictValue: '或签'}]"
        v-model="state.actorConfig.examineMode"
    ></zh-form-select>
    <zh-col :span="16" v-if="state.actorConfig.configType == '1'">
      <el-form-item :label="`选择${state.actorConfig.nodeType == 1? '审核':'发起'}人员`">
        <el-button
            type="primary"
            icon="el-icon-plus"
            round
            @click="selectHandle(1, state.actorConfig.nodeUserList)"
        >选择人员</el-button
        >
        <div class="tags-list">
          <el-tag
              v-for="(user, index) in state.actorConfig.nodeUserList"
              :key="user.id"
              closable
              @close="delUser(index)"
          >{{ user.name }}</el-tag
          >
        </div>
      </el-form-item>
    </zh-col>
  </zh-form>

  <use-select
      v-if="selectVisible"
      ref="useselect"
      @closed="selectVisible = false"></use-select>
</template>

<script lang="ts" setup name="form">
import useSelect from '@/components/scWorkflow/select.vue'
import {defineProps, nextTick, onMounted, reactive, ref, watch} from "vue";

let selectVisible = ref(false);
const useselect = ref(null);
const props = defineProps({
  actorConfig: {
    type: Object,
    default: () => {},
  },
  dictData: {
    type: Object,
    default: () => {}
  }
});

const state = reactive({
  campusParam: {},
  dictData: {},
  actorConfig: {
    orgId: undefined,
    processKey: undefined,
    processName: undefined,
    nodeId: undefined,
    nodeName: undefined,
    nodeType: undefined,
    examineMode: undefined,
    nodeUserList: [],
    configType: undefined
  },
})

function selectHandle(setType,list) {
  selectVisible.value = true
  nextTick(() => {
    useselect.value.open(setType, list,{showOrg: true,groupFrom: "org",hasOnlyOne: false});
  })
}

function delUser(index) {
  state.actorConfig.nodeUserList.splice(index, 1);
}

function getData() {
  if(state.actorConfig.configType == '1' && state.actorConfig.nodeUserList.length === 0){
    return null;
  }
 return state.actorConfig;
}

watch(
    () => state.actorConfig.processKey,
    (val) => {
      if(val){
        for (let element of props.dictData.PROCESSKEY) {
          if(element.dictKey === state.actorConfig.processKey){
            state.actorConfig.processName = element.dictValue;
            break;
          }
        }
        $api.common.send
            .post("flowLongDeploy014", {processKey: state.actorConfig.processKey})
            .then((res) => {
              state.dictData.NODEID = res.result;
            })
            .catch(() => {});
      }
    }
);
watch(
    () => state.actorConfig.nodeId,
    (val) => {
      if(val){
        setTimeout(()=>{
          for (let element of state.dictData.NODEID) {
            if(element.dictKey === state.actorConfig.nodeId){
              state.actorConfig.nodeName = element.dictValue;
              state.actorConfig.nodeType = element.classify;
              break;
            }
          }
        },100)
      }
    }
);

onMounted(() => {
  nextTick(() => {
    state.actorConfig = props.actorConfig;
    if(!state.actorConfig.nodeUserList){
      state.actorConfig.nodeUserList = [];
    }
  });
});

defineExpose({
  getData
})
</script>

<style scoped>

</style>